<template>
  <view class="head_box">
    <view class="header">

      <qui-icon v-if="isShowBack" name="icon-back1" size="38" @click="gotoBack"></qui-icon>

      <text class="title">{{ MenuTitle }}</text>
      <view class="right-box">
        <view class="menu" v-for="(item, index) in icons" :key="item">
          <qui-icon :name="item" size="38" @click="onClick(index)"></qui-icon>
        </view>
        <view class="menu" v-for="(item, index) in menus" :key="item">
          <span @click="onClick(index)">{{ item }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: '标题',
      },
      isShowBack: {
        type: Boolean,
        default: true,
      },
      icons: {
        type: Array,
        default: () => [],
      },
      menus: {
        type: Array,
        default: () => [],
      },
    },

    data() {
      return {
        MenuTitle: '',
      };
    },
    mounted() {



    },
    watch: {
      title: {
        handler(newName, oldName) {
          this.MenuTitle = newName;
          // #ifdef H5
          let ua = window.navigator.userAgent.toLowerCase()
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            this.MenuTitle = '  '

          }
          // #endif


        },
        immediate: true

      }
    },
    methods: {
      gotoBack() {
        uni.navigateBack();
      },
      onClick(index) {
        this.$emit('mclick', index);
      },
    },
  };
</script>

<style>
  .head_box {
    display: flex;
    width: 100%;
    background-color: rgb(75, 206, 215);
    text-align: left;
    justify-content: start;
  }

  .header {
    display: inline-flex;
    justify-content: space-between;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 50rpx;
    line-height: 50rpx;

    padding-bottom: 10rpx;
    color: #FFFFFF;
    /* #ifdef H5 */
    padding-top: 10rpx;
    /* #endif */
    /* #ifndef H5 */
    padding-top: 60rpx;
    /* #endif */

    /* #ifndef MP-WEIXIN */
    width: 100%;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    width: 500rpx;

    /* #endif */


  }

  .icon-back1 {

    margin-left: 10rpx;
  }
.right-box{
   display: inline-flex;
}
  .icon-_11 {
    color: #5f6d64;
  }
  
  .menu {

    margin-right: 20rpx;
    font-size: 25rpx;
    width: 50rpx;
  }

  .title {
    padding-left: 10rpx;
  }
</style>
